<template>
  <el-dialog :title="$t('custom.component.viewComponent.setdefaulthomepage')"
             :visible.sync="dialogVisible" append-to-body
            @close="reset"
             width="30%">
      <div v-loading="loading1||loading2">
        <div>{{$t('custom.component.viewComponent.setdefaulthomepageforusers')}}</div>
        <div>
          <el-select
            v-model="obj.userIds"
            multiple clearable filterable
            collapse-tags
            style="margin-top: 10px;width:100%"
            :placeholder="$t('custom.component.gadget.placeholder')">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.username"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div slot="footer"
              class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">{{$t('cancel')}}</el-button>
          <el-button size="mini" type="primary"
                    @click="onSave">{{$t('confirm')}}</el-button>
        </div>
      </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      dialogVisible: false,
      options: [],
      obj: {},
      loading1: false,
      loading2: false
    }
  },
  methods: {
    init (item) {
      this.dialogVisible = true
      this.loading1 = true
      this.loading2 = true
      this.getPageGadgetList(item.id)
      this.getUserListByDashboard(item.id)
    },
    reset () {
      this.obj = {}
      this.options = []
    },
    getPageGadgetList (id) {
      const params = {
        businessId: id
      }
      var sourceTenantCode = sessionStorage.getItem('isMySelfCode') ? sessionStorage.getItem('isMySelfCode') : this.$store.state.user.tenantCode
      this.$interface.reports.getDashboardLayout(params, sourceTenantCode)
        .then(({ data: res }) => {
          this.loading1 = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            this.obj = res.data
          }
        })
    },
    getUserListByDashboard (id) {
      const params = {
        reportId: id
      }
      this.$interface.system.getUserListByDashboard(params)
        .then(({ data: res }) => {
          this.loading2 = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          if (res.data) {
            this.options = res.data
          }
        })
    },
    onSave () {
      this.loading1 = true
      const params = {
        id: this.obj.businessId,
        userIds: this.obj.userIds
      }
      this.$interface.reports.postUpdateHomePage(params).then(({
        data: res
      }) => {
        this.dialogVisible = false
        this.loading1 = false
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          this.$message.success('Success')
        }
      })
    }
  }
}
</script>
